<template>
  <div style="height: 100%">
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside
        width="200px"
        style="background-color: rgb(238, 241, 246); text-align: start"
      >
        <Aside></Aside>
      </el-aside>

      <el-container>
        <el-header
          style="font-size: 12px; line-height: 120px; height: 120px; padding: 0"
        >
          <img src="../assets/3.png" alt="Header Image" />
        </el-header>
        <el-main>
          <!--当前页面的子路由将在<router-view/>中展示-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import axios from "axios";
import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";

export default {
  //这是 ES6 的模块导出语法，表示这个对象是整个模块（通常是一个 .vue 文件）的默认导出。在 Vue.js 中，这通常是一个 Vue 组件的定义
  name: "Manage", //这是 Vue 组件的一个选项，用于在该组件内注册其他子组件。这样，你就可以在 HomeView 组件的模板中直接使用这些子组件了。
  components: {
    Aside, //引入子组件，可以在 HomeView 组件的模板中使用 <Aside /> 标签了
    Header, //可以在 HomeView 组件的模板中使用 <Header /> 标签了
  },
};
</script>
<style>
.el-main {
  text-align: left;
}
</style>
